<template>
	<view class="apps">
		<view class="pt40 flex fdc">
			<view class="mt80 mlr20 ptb20 plr20 bgwhite flex fdc">
				<uv-form :model="form" :rules="rules" ref="form" labelPosition="left">
					<uv-form-item prop="mobile" label="+86" borderBottom labelWidth="60px">
						<uv-input v-model="form.mobile" placeholder="请输入手机号码" border="none"  />
					</uv-form-item>
					<uv-form-item prop="code" label="验证码" borderBottom labelWidth="60px">
						<uv-input v-model="form.code" placeholder="请输入6位验证码" border="none" />
						<template v-slot:right>
							<uv-button
								@click="getCode"
								:text="tips"
								type="success"
								size="mini"
								:disabled="disabled1"
							></uv-button>
						</template>
					</uv-form-item>
					<uv-button type="primary" @click="submit" customStyle="margin-top: 20rpx">手机号登录</uv-button>
				</uv-form>
			</view>
		</view>
		<uv-code ref="uCode" seconds="60" @start="disabled1 = true" @end="disabled1 = false" @change="codeChange" ></uv-code>
	</view>
</template>

<script>
	import { alert } from "@/common/util/index.js"
	import { code, mobile } from '@/uni_modules/uv-ui-tools/libs/function/test.js'
	import { toast,timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import { verifyCode,login } from "@/common/user/index.js"
	import { useUserInfo} from "@/stores/userInfo.js"
	let app;
	export default {
		data() {
			return {
				form:{
					mobile:"",
					code:"",
				},
				seconds:60,
				disabled1: false,
				tips: '获取验证码',
				rules:{
					mobile:[{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur']
					},{
						validator: (rule, value, callback) => {
							return mobile(value);
						},
						message: "手机号格式错误",
						trigger: [ "blur"],
					}],
					code: [{
						type: 'string',
						required: true,
						len: 6,
						message: '请填写6位验证码',
						trigger: ['blur']
					},{
						validator: (rule, value, callback) => {
							return code(value);
						},
						message: "验证码格式错误",
						trigger: ["blur"],
					}]
				}
			}
		},
		onLoad() {
			
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			onAuthError(e){
				console.log(e);
			},
			
			handleAuthError(e){
				console.log(e)
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.form.mobile == ''){
					alert('请输入手机号');
					return 
				}
				if(mobile(this.form.mobile) == false){
					alert('手机号码错误');
					return ;
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					verifyCode(this.form.mobile).then((rlt)=>{
						uni.hideLoading();
						toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
				} else {
					//toast('倒计时结束后再发送');
				}
			},
			// 提交
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					login(this.form).then((res)=>{
						console.log(res);
						if(res.code == 0){
							const userinfo = useUserInfo();
							userinfo.dataFill(res.data);
							userinfo.setToken(res.token);
							userinfo.setAccountId(res.data.accountId)
							userinfo.setUserId(res.data.id)
							uni.navigateBack();
						}else{
							alert(res.message);
						}
					});
				}).catch(errors => {
					toast('校验失败')
				})
			},
		},
	}
</script>

<style scoped>
.uv-input__content__field-wrapper,.uv-input__content__field-wrapper__field{background-color: #fff !important;}
</style>
